<template>
  <div class="element-table">
    <div class="el-head">
      <div class="table-left">
        <!--        <el-button class="table-button-left" type="primary" @click="handleUpload()">新增</el-button>-->
      </div>
      <div class="table-right">
        <el-select v-model="categoryUrl" clearable filterable class="table-input-right" placeholder="请选择" @change="clickQuery">
          <el-option v-for="(item,index) in categoryList" :key="index" :value="item.value" :label="item.label"/>
        </el-select>
        <el-button class="table-button-right" @click="clickQuery" type="primary">查询</el-button>
      </div>
    </div>
    <div>
      <el-table :data="dataList" border>
        <el-table-column v-slot="scope" label="图册名字" align="center">
          {{ scope.row.title }}
        </el-table-column>
        <!--        <el-table-column v-slot="scope" label="封面" align="center">-->
        <!--          <img :src="imageUtils(xiurenImg,scope.row.coverUrl)" class="tableImg" @click="handleImage(scope.row.coverUrl)" alt=""/>-->
        <!--        </el-table-column>-->
<!--        <el-table-column v-slot="scope" label="详情链接" align="center">-->
<!--          <el-button type="text">{{ scope.row.url }}</el-button>-->
<!--        </el-table-column>-->
        <el-table-column v-slot="scope" label="操作" align="center">
          <el-button type="primary" round size="mini" id="selectFolderBtn" class="table-button-param" @click="selectFolder(scope.row)">下载套图</el-button>
<!--          <el-button type="primary" round size="mini" class="table-button-param" @click="handleDetails(scope.row)">查看详情</el-button>-->
          <!--          <el-button type="danger" round size="mini" class="table-button-param" @click="handleDelete(scope.row)">删除</el-button>-->
        </el-table-column>
      </el-table>
      <el-pagination background :current.sync="pageNo" class="page" layout="total,prev, pager, next" @current-change="change"
          :total="pageTotal" align="center"></el-pagination>
    </div>
    <div>
      <el-dialog title="详情图" width="45%" :visible.sync="imgModal" destroy-on-close close-on-press-escape lock-scroll>
        <img :src="imgName" style="width: 100%;height: 450px" alt="">
      </el-dialog>
    </div>
  </div>
</template>

<script>
import '@/styles/style.scss'
import '@/styles/upload.scss'
import appUtils, {formatDate, initCacheData, isBlank, isFlag, moneyFormat, ossPut} from '@/utils/util'
import {imageUtils} from '@/utils/imageUtil'
import {taotuImageList, taotuDown} from '@/api/taotu'
import {beforeRouteEnterCopy, beforeRouteLeave} from '@/utils/pageUtil'
import CoverUpload from '@/components/Upload/coverUpload'
import AvatarUpload from '@/components/Upload/avatarUpload'
import ruleUtils from '@/utils/ruleUtils'
import {ipcRenderer} from "electron";

export default {
  name: 'taotuList',
  components: {
    AvatarUpload,
    CoverUpload
  },
  data() {
    return {
      pageNo: 1,
      pageTotal: 9999,
      paramData: {},
      xiurenImg: appUtils.xiurenImg,
      imgName: '',
      categoryUrl: '',
      inspectType: '',
      name: '',
      dataTitle: '',
      dataFlag: false,
      dataDetails: {},
      ruleValidate: {
        name: [{
          required: true,
          message: '必填项',
          validator: ruleUtils.nullValidator,
          trigger: 'blur'
        }]
      },
      imgModal: false,
      setMealName: '',
      selection: '',
      visible: false,
      visible1: false,
      dataList: [],
      categoryList: [],
      routerPage: [],
      dataListCopy: []
    }
  },
  methods: {
    formatDate,
    ossPut,
    isBlank,
    isFlag,
    moneyFormat,
    imageUtils,
    async clickQuery() {
      this.change(1)
    },
    async change(page) {
      if (page > 1) {
        this.pageNo = page
      } else {
        this.pageNo = 1
      }
      taotuImageList(this.categoryUrl, this.pageNo).then(res => {
        console.log(res.data)
        this.dataList = res.data.imageDetailsList.map((value, index) => {
          return value
        })
        this.dataListCopy = JSON.parse(JSON.stringify(res.data))
        this.categoryList = res.data.categoryList
      })
    },
    async selectFolder(param) {
      try {
        try {
          let appPath = await ipcRenderer.invoke('dialog-show-open-dialog');
          taotuDown(param.url, param.title, appPath[0] + '/').then(res => {
            if (isFlag(res.status, 200)) {
              this.$message.success('下载成功')
            } else {
              this.$message.error(res.data.message)
            }
          })
        } catch (error) {
          console.error('选择文件夹时出错：', error);
        }
      } catch (error) {
        console.error("选择文件夹时出错：", error);
      }
    },
    handleImage(name) {
      this.imgName = imageUtils(appUtils.xiurenImg, name)
      this.imgModal = true
    },
    async initData() {
    },
    async initFunctions() {
      // if (isFlag(this.$store.state.initDataFlag, true)) {
      //   await this.initData()
      //   await this.change(this.pageNo)
      // }
    }
  },
  activated() {
    console.log("进来了吗")
    this.initFunctions()
    this.$store.state.initDataFlag = false
    setTimeout(() => {
      this.$store.state.initDataFlag = true
    }, 300)
  },
}
</script>
<style scoped>
/deep/ .el-button + .el-button {
  margin-left: 0;
}

/deep/ .el-table th.el-table__cell {
  user-select: initial;
}
</style>
